<template>
  <div class="person_homeView">
    <el-card v-if="!detailIsShow" class="top_nav" :shadow="shadowShow">
      <div class="top_nav_inner">
        <div class="top_nav_left">
          <el-form label-width="100px" :inline="true" :size="optionButtonSize">
            <el-form-item>
              <el-input
                v-model="form.name"
                clearable
                :placeholder="$t('partner.hezuo23')"
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="form.organizedType"
                style="width: 150px"
                clearable
                :placeholder="$t('personOriginationInfo.xinxi9')"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <!-- <el-date-picker
                v-model="form.createDate"
                style="width: 150px"
                value-format="yyyy-MM-dd"
                type="date"
                :placeholder="$t('add.add122')"
              /> -->
              <el-date-picker
                v-model="dates"
                type="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" :size="optionButtonSize" @click="getPatientList">
                {{ $t('add.add123') }}
              </el-button>
              <el-button plain :size="optionButtonSize" @click="resetClick">{{
                $t('add.add124')
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <el-card v-if="!detailIsShow" :shadow="shadowShow" class="partner_inner">
      <el-table
        :data="tableData"
        style="width: 100%"
        size="mini"
        :header-cell-style="headercellstyle"
        @sort-change="sortChange"
      >
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column align="center" prop="name" :label="$t('add.add210')" />
        <el-table-column
          align="center"
          prop="organizedType"
          :label="$t('personOriginationInfo.xinxi9')"
        >
          <template slot-scope="scope">{{
            scope.row.organizedType == 1 ? $t('add.add208') : $t('add.add209')
          }}</template>
        </el-table-column>
        <el-table-column align="center" prop="delFlag" :label="$t('add.add082')">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            <span v-if="scope.row.delFlag == 0">{{ $t('institutionSetting.jigou104') }}</span>
            <span v-if="scope.row.delFlag == 1">{{ $t('institutionSetting.jigou103') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="hotData"
          sortable="custom"
          label="最近1个月订单容量"
        />
        <el-table-column
          align="center"
          prop="coldData"
          sortable="custom"
          label="1个月前的订单容量"
        />
        <el-table-column align="center" prop="totalData" sortable="custom" label="已使用的总容量" />
        <!-- <el-table-column align="center" prop="capacityRemainStr" label="创建时间" /> -->
        <!-- <el-table-column align="center" prop="status" label="图示" width="230">
          <template slot-scope="scope">
            <el-progress
              color="#409eff"
              :text-inside="true"
              :stroke-width="16"
              :percentage="((scope.row.capacityUsed / scope.row.capacityTotal) * 100).toFixed(2)"
            />
          </template>
        </el-table-column> -->
        <el-table-column
          align="center"
          prop="createDate"
          sortable="custom"
          :label="$t('add.add134')"
        />
        <!-- <el-table-column align="center" :label="$t('add.add131')" width="200">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            <el-button type="text" :size="tableButtonSize" @click="kuorong(scope.row.id)">
              {{ $t('add.add183') }}
            </el-button>
            <el-button
              v-if="scope.row.capacityStatus == 0"
              type="text"
              :size="tableButtonSize"
              @click="guanbi(scope.row, 1)"
              >禁用</el-button
            >
            <el-button
              v-if="scope.row.capacityStatus == 1"
              type="text"
              :size="tableButtonSize"
              @click="guanbi(scope.row, 0)"
              >打开</el-button
            >
            <el-button type="text" :size="tableButtonSize" @click="detailItem(scope.row)">
              {{ $t('add.add132') }}
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div style="margin: 16px 0; float: right">
        <el-pagination
          background
          :current-page.sync="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog :title="$t('add.add183')" :visible.sync="dialogVisible" width="360px" :close-on-click-modal="false">
      <el-input
        v-model="rongliang"
        type="number"
        oninput="if(value){value=value.replace(/[^\d]/g,'')}"
        :placeholder="$t('add.add148')"
        style="width: 260px"
      >
        <template slot="append">GB</template>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button :size="optionButtonSize" @click="dialogVisible = false">{{
          $t('add.add203')
        }}</el-button>
        <el-button :size="optionButtonSize" type="primary" @click="submit">{{
          $t('add.add81')
        }}</el-button>
      </span>
    </el-dialog>
    <detail v-show="detailIsShow" ref="detail" @children="children" />
  </div>
</template>

<script>
import detail from './detail.vue';
export default {
  name: 'Home',
  components: {
    detail,
  },

  data() {
    return {
      form: {
        name: '',
        organizedType: '',
        createDate: '',
      },
      dates: [],
      sortField: 'create_date',
      sortType: 'desc',
      page: 1, // 默认第1页
      limit: 10, // 每页条数
      total: 0, // 总条数
      tableData: [],
      dialogVisible: false,
      detailIsShow: false,
      radio: 1,
      options: [
        {
          value: '1',
          label: this.$t('add.add208'),
        },
        {
          value: '2',
          label: this.$t('add.add209'),
        },
      ],
      value: '',
      rongliang: null,
    };
  },
  created() {
    this.getList();
  },

  methods: {
    // 拿所有数据
    getList() {
      const formData = new FormData();
      formData.append('page', this.page);
      formData.append('limit', this.limit);
      formData.append('name', this.form.name);
      formData.append('organizedType', this.form.organizedType);
      formData.append('createDate', this.form.createDate);
      formData.append('sortField', this.sortField);
      formData.append('sortType', this.sortType);
      if (this.dates && this.dates.length > 0) {
        formData.append('startTime', this.dates[0]);
        formData.append('endTime', this.dates[1]);
      }

      this.$http
        .post('/sys/oss/listNew', formData)
        .then((res) => {
          if (res.data.code !== 0) {
            return this.$message.error(res.data.msg);
          } else {
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
            this.tableData.forEach((item, index) => {
              item.hotData = item.hotData + 'GB';
              item.coldData = item.coldData + 'GB';
              item.totalData = item.totalData + 'GB';
            });
            if (this.tableData.length <= 0 && this.page > 1) {
              this.page -= 1;
              this.getList();
            }
          }
        })
        .catch((e) => {
          console.error(e);
        })
        .finally();
      // this.$http
      //   .get(
      //     `/sys/oss/listNew?page=${this.page}&limit=${this.limit}&name=${this.form.name}&organizedType=${this.form.organizedType}&createDate=${this.form.createDate}`,
      //   )
      //   .then(({ data: res }) => {
      //     if (res.code !== 0) {
      //       return this.$message.error(res.msg);
      //     } else {
      //       this.tableData = res.data.list;
      //       this.total = res.data.total;
      //       if (this.tableData.length <= 0 && this.page > 1) {
      //         this.page -= 1;
      //         this.getList();
      //       }
      //     }
      //   })
      //   .catch((err) => {
      //     console.log('err', err);
      //   });
    },

    sortChange({ prop, order }) {
      if (prop === 'createDate') {
        this.sortField = 'create_date';
      } else {
        this.sortField = prop;
      }
      if (order === 'ascending') {
        this.sortType = 'asc';
      } else if (order === 'descending') {
        this.sortType = 'desc';
      }
      this.getList();
    },
    guanbi(val, status) {
      let text;
      if (status == 1) {
        text = '禁用';
      } else if (status == 0) {
        text = '打开';
      }
      this.$confirm(`是否确认${text}${val.name}`, this.$t('add.add140'), {
        confirmButtonText: this.$t('add.add142'),
        cancelButtonText: this.$t('add.add143'),
        type: 'warning',
      })
        .then(() => {
          // 0 启用 1禁用
          this.$http
            .put('/sys/organized/update', {
              id: val.id,
              capacityStatus: status,
            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(text + '成功');
                this.getList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消关闭',
          });
        });
    },
    kuorong(id) {
      this.rongliang = null;
      this.deptId = id;
      this.dialogVisible = true;
    },
    submit() {
      if (this.rongliang >= 5) {
        this.$http
          .post(`/sys/oss/expansion?deptId=${this.deptId}&size=${this.rongliang}`)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            } else {
              this.getList();
              this.$message.success('扩容成功');
              this.dialogVisible = false;
            }
          })
          .catch((err) => {
            console.log('err', err);
          });
      } else {
        this.$message.error('扩容容量不能小于5G');
      }
    },
    detailItem(val) {
      this.$refs.detail.form = val;
      this.$refs.activeName = 'first';
      this.detailIsShow = true;
    },
    children() {
      this.detailIsShow = false;
    },
    // 重置
    resetClick() {
      this.form = {
        name: '',
        organizedType: '',
        createDate: '',
      };
      this.dates = [];
      this.page = 1;
      this.total = 0;
      this.getList();
    },
    // 搜索
    getPatientList() {
      this.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.person_homeView {
  height: 100%;

  .el-header {
    color: #333;
  }

  .el-aside {
    background-color: transparent;
    // color: #333;
    text-align: center;

    // padding-left: 12px;
    // line-height: 200px;
    .el-menu {
      border: none;
    }
  }

  .el-main {
    background-color: #f8f8f8;
    // color: #333;
    text-align: left;
    padding: 10px !important;
  }

  .el-container {
    height: 100%;
  }

  .nav_back {
    margin-top: 15px;
    padding-left: 5px;

    .title {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #4884e5;
    }
  }
}

.el-menu-item.is-active {
  background-color: #e6ecf0 !important;
}

.el-dropdown-link {
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #003e67;
}

.partner_inner {
  margin-top: 20px;
}
</style>
